<template>
  <div class="user-list-container">
    <el-row :gutter="20" class="toolbar" align="middle">
      <el-col :span="6">
        <el-input v-model="searchName" placeholder="搜索姓名" clearable />
      </el-col>
      <el-col :span="6">
        <el-select v-model="searchRole" placeholder="选择职位" clearable>
          <!-- <el-option label="管理员" value="100" />
          <el-option label="医生" value="102" />
          <el-option label="客服" value="103" /> -->
          <el-option v-for="(label, value) in roleMap" :key="value" :label="label" :value="value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-button type="primary" @click="addUser">添加用户</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData" style="width: 100%; margin-top: 20px" border
      :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center', padding: '0' }">
      <el-table-column label="头像" width="100" align="center">
        <template #default="{ row }">
          <img :src="row.avatar" alt="avatar" class="avatar-img" draggable="false" />
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="姓名" />
      <el-table-column prop="loginName" label="账号" />
      <el-table-column prop="roles" label="职位" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phoneNumber" label="电话" />
      <el-table-column label="性别">
        <template #default="{ row }">
          {{ row.sex === '0' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === '0' ? 'success' : 'danger'">
            {{ row.status === '0' ? '正常' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="140">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="editUser(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <UserFormDialog v-model:visible="dialogVisible" :mode="formMode" :user="currentUser" @refresh="handleSearch" />


    <div class="pagination-wrapper">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
        v-model:current-page="currentPage" @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserList, deleteUser } from '@/api/user'
import UserFormDialog from './component/UserFormDialog.vue' // 
import { ElMessage } from 'element-plus'

const tableData = ref([
  // {
  //   userId: 1001,
  //   roleId: 100,
  //   loginName: 'admin',
  //   userName: '小班哥1',
  //   email: 'banjilin@qq.com',
  //   phoneNumber: '17666186963',
  //   sex: '0',
  //   avatar: 'http://123.249.6.228:9000/file/xiaobange.jpg',
  //   status: '0',
  //   createTime: '2025-04-24 17:00:33',
  //   remark: '超级管理员',
  //   roles: 'admin'
  // },
  // 这里模拟多条数据...
])

const total = 1
// 模拟总条数
const pageSize = 20

const searchName = ref('')
const searchRole = ref('')
const currentPage = ref(1)
const loading = ref(false)

const dialogVisible = ref(false)
const formMode = ref('add') // 'add' 或 'edit'
const currentUser = ref(null)

const roleMap = {
  100: '管理员',
  102: '医生',
  103: '客服'
}

const handleSearch = () => {
  // 这里可以添加搜索逻辑，比如调用API获取数据
  const params = {
    username: searchName.value.trim() || null,
    role: searchRole.value || null,
    current: 1,
    size: pageSize
  }
  console.log('搜索参数:', params);
  // 调用获取用户列表的函数
  handleGetUserPage(params);
}

const handlePageChange = (page) => {
  console.log('分页参数:', {
    name: searchName.value.trim(),
    role: searchRole.value,
    page,
    size: pageSize
  })
  currentPage.value = page
}

// 添加用户
const addUser = () => {
  formMode.value = 'add'
  currentUser.value = null
  dialogVisible.value = true
}

// 编辑用户
const editUser = (user) => {
  formMode.value = 'edit'
  currentUser.value = { ...user }
  dialogVisible.value = true
}

const handleDelete = async (user) => {
  // 确认删除操作
  await deleteUser(user.userId).then(() => {
    ElMessage.success('删除成功');
    // 重新加载用户列表
    handleSearch();
  })
}

const handleGetUserPage = async (params) => {
  loading.value = true;
  // 重置当前页为1
  currentPage.value = 1
  //发起搜索请求
  const { data } = await getUserList(params);
  console.log('搜索结果:', data);

  tableData.value = data || [];

  loading.value = false;
}

onMounted(() => {
  // 初始加载用户列表
  handleSearch({
    username: searchName.value.trim() || null,
    role: searchRole.value || null,
    current: 1,
    size: pageSize
  });
});
</script>

<style scoped>
.user-list-container {
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.avatar-img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  user-select: none;
  pointer-events: none;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: center;
}

.el-table th,
.el-table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
}
</style>